<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>摸鱼工资计算器</title>
    <style>
      body {
        font-family: "Arial", sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        color: #333;
      }

      .container {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 30px;
        width: 90%;
        max-width: 500px;
        text-align: center;
        transition: all 0.3s ease;
      }

      h1 {
        color: #4a6baf;
        margin-bottom: 30px;
        font-size: 24px;
      }

      .input-group {
        margin-bottom: 25px;
      }

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
      }

      input[type="number"] {
        width: 80%;
        padding: 12px 15px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: border 0.3s;
      }

      input[type="number"]:focus {
        border-color: #4a6baf;
        outline: none;
      }

      button {
        background-color: #4a6baf;
        color: white;
        border: none;
        padding: 12px 25px;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        font-weight: bold;
        margin: 10px 5px;
        min-width: 120px;
      }

      button:hover {
        background-color: #3a5a9f;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      button:active {
        transform: translateY(0);
      }

      .result {
        margin-top: 30px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        display: none;
      }

      .result.active {
        display: block;
        animation: fadeIn 0.5s;
      }

      .money {
        font-size: 28px;
        font-weight: bold;
        color: red;
        margin: 15px 0;
      }

      .time {
        color: #666;
        font-size: 14px;
      }

      .fish-icon {
        font-size: 50px;
        margin-bottom: 20px;
        display: inline-block;
        animation: float 3s ease-in-out infinite;
      }

      @keyframes float {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="fish-icon">🐟</div>
      <h1>赚钱计算器</h1>

      <div class="input-group">
        <label for="salary">请输入你的月薪（元）</label>
        <input type="number" id="salary" placeholder="例如: 10000" />
      </div>

      <div>
        <button id="startBtn">开始摸鱼</button>
        <button id="stopBtn" class="hidden">开始工作</button>
      </div>

      <div id="result" class="result">
        <p>摸鱼的钱才是你赚到的钱</p>
        <p>你已经赚到</p>
        ß
        <div class="money" id="earnedMoney">0.00 元</div>
        <p class="time" id="timeInfo">摸鱼时间: 0秒</p>
      </div>
    </div>

    <script>
      let salary = 0;
      let earned = 0;
      let timer = null;
      let seconds = 0;
      let isRunning = false;

      const salaryInput = document.getElementById("salary");
      const startBtn = document.getElementById("startBtn");
      const stopBtn = document.getElementById("stopBtn");
      const resultDiv = document.getElementById("result");
      const earnedMoney = document.getElementById("earnedMoney");
      const timeInfo = document.getElementById("timeInfo");

      startBtn.addEventListener("click", startFishing);
      stopBtn.addEventListener("click", stopFishing);

      function startFishing() {
        if (isRunning) return;

        const inputSalary = parseFloat(salaryInput.value);
        if (isNaN(inputSalary) || inputSalary <= 0) {
          alert("请输入有效的工资数额");
          return;
        }

        salary = inputSalary;
        startBtn.classList.add("hidden");
        stopBtn.classList.remove("hidden");
        resultDiv.classList.add("active");
        isRunning = true;

        const moneyPerSecond = salary / 21.75 / 8 / 3600;

        timer = setInterval(() => {
          earned += moneyPerSecond * 2;
          seconds += 2;

          earnedMoney.textContent = earned.toFixed(2) + " 元";

          const hours = Math.floor(seconds / 3600);
          const minutes = Math.floor((seconds % 3600) / 60);
          const secs = seconds % 60;

          let timeString = "摸鱼时间: ";
          if (hours > 0) timeString += `${hours}小时 `;
          if (minutes > 0 || hours > 0) timeString += `${minutes}分钟 `;
          timeString += `${secs}秒`;

          timeInfo.textContent = timeString;
        }, 2000);
      }

      function stopFishing() {
        if (!isRunning) return;

        clearInterval(timer);
        startBtn.classList.remove("hidden");
        stopBtn.classList.add("hidden");
        isRunning = false;
      }
    </script>
  </body>
</html>
